<template>
	<!-- 登录框容器 -->
	<view class="login-container">
		<!-- 登录框 -->
		<view class="login-form">
			<!-- 标题 -->
			<view class="title">
				用户登录
			</view>
			<!-- 手机号 -->
			<view class="form-item input-phone">
				<uni-easyinput placeholder="请输入手机号" clearable prefixIcon="person" style="border-radius:50%;"
					v-model="formData.username" />
			</view>
			<!-- 密码 -->
			<view class="form-item input-password">
				<uni-easyinput type="password" placeholder="请输入密码" prefixIcon="locked" style="border-radius: 50%;"
					v-model="formData.password" />
			</view>
			<!-- 登录按钮 -->
			<view class="form-item button-login">
				<u-button type="primary" shape="circle" text="登录" @click="login()"></u-button>
			</view>
			<!-- 其他 -->
			<view class="form-item login-other">
				<view class="" style="color: #4b96cc;">
					忘记密码
				</view>
				<view>
					<!-- color线条的颜色 direction线条的方向 hairline是否显示细边框-->
					<u-line direction='col' color='#cbcbcb' hairline></u-line>
				</view>
				<view class="">
					还没有账号，
					<text style="color: #4b96cc;">立即注册</text>
				</view>
			</view>
			<!-- 分割线 -->
			<view class="divider-line">
				<u-divider text="第三方登录"></u-divider>
			</view>
			<!-- 使用微信登录 -->
			<view class="btn-weixin"
				style="display: flex;justify-content: center;border: 1px solid #f8f8f8;padding: 5px;">
				<u-icon size="30" name="weixin-circle-fill" color="#3eb80d" style="background-color: #fff;"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					username: "",
					password: ""
				}
			}
		},
		methods: {
			login() {
				console.log(this.formData);
			}
		}
	}
</script>

<style>
page {
	background-color: #008080;
	overflow: hidden;
	/* #ifdef H5 */
	height: 100%;
	/* #endif */
}
</style>

<style lang="scss" scoped>
	.login-container {
		// background-color: #017f7c;
		display: flex;
		justify-content: center;
		align-items: center;
		/* #ifdef H5 */
		height: 100%;
		/* #endif */
		/* #ifdef MP/APP */
		height: 100vh;
		/* #endif */
		

		// 登录框
		.login-form {
			background-color: #fff;
			padding: 30px;
			border-radius: 8px;
			position: relative;
			width: 76vw;

			// 表单项目
			.form-item {
				margin-top: 30px;

				// 登录表单
				::v-deep .is-input-border {
					border-radius: 200rpx;
					margin-bottom: 1rem;
				}
			}

			// 标题
			.title {
				display: flex;
				justify-content: center;
				font-weight: bold;
				font-size: 1.5rem
			}

			// 其他
			.login-other {
				display: flex;
				justify-content: space-around;
			}
		}

	}
</style>
